<template>
  <div class="swiper-wrapper">
    <swiper :options="swiperOption" v-if="swiperList.length">
      <!-- slides -->
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img" :src="item.imgUrl" alt="" />
        <div>{{ item.imgUrl }}</div>
      </swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper> 
  </div>
</template>

<script>

export default {
  name: 'HomeSwiper',
  props: {
    // 进入页面时swiper直接最后一张的原因: 因为最开始创建是一个空的数组， 所以直接循环到头了
    // 解决： 用v-if判断如果是一个空数组， 那么不让它显示
    swiperList: [Array, String],
    
  },
  data: function() {
    return {
      swiperOption: {
        // width: window.innerWidth,
        autoplay: 3333,
        autoplayDisableOnInteraction: true,
        pagination: '.swiper-pagination', //找到 分页器(小圆点)的类
        loop : true, //是否循环(拉到最后或最前继续拉会循环)
      },
      
    }
  },
  computed: {
    data: function() {
      
    }
  }
}
</script>

<style lang="stylus"  scoped >
   /* 设置样式穿透 , 这里的样式不收到scoped的影响
    这个样式穿透不是stylus的功能, 有没有stylus都是一样的
    */
  .swiper-wrapper >>> .swiper-pagination-bullet-active {
    background-color: red;
  } 

  .swiper-wrapper  {
    // 不能固定宽度
    // width: 7.5rem;
    height: 2.04rem;
    background-color: #eee;
  }
  /*   这么定义不会生效的, 因为有scope的属性, 其实下面的 
   .swiper-pagination-bullet-active 并不在这个swiper.vue的这个组件里面, 而在swiper-awsome里面
   需要样式穿透(推荐), 或是把scoped去掉(不好)
  */
  .swiper-pagination-bullet-active {
    background-color: orange !important;
  }

  .swiper-img {
    width: 100%;
    height: 100%;
  }
</style>

